<template>
	<view>
		<view class="box">
			<view class="shou">
				<view class="shou-box">
					<image src="../../static/sou.png" mode=""></image>
					<input @input="Waybill_lists" type="text" placeholder="请输入搜索">
				</view>
				<text style="margin-right: 20px; color: #fff;" @click="goBondList">申请记录</text>
			</view>
			<view class="wu" v-if="Waybill_lists_data.length==0">
				<image src="../../static/wu.png" style="width: 182px; height: 150px; " mode=""></image>
				<p>暂无数据</p>
			</view>
			<view class="kks" v-for="(time,index) in Waybill_lists_data">
				<view class="jjs">
					<view>
						<view>
							<view>运单编号：{{time.waybill_sn}}</view>
							<view>路由：
							<text  >{{lineroute}}</text>
							</view>
							<view>
								<view>电话：{{time.driver_mobile}}</view>
								<view>时间：{{time.createtime | dateformat}}</view>
							</view>
							<button @click="bond_apply(time.id+'&bond_amount='+time.bond_amount)">申请退回保证金</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Waybill_lists_data: [],
				bond_apply_data: null
			}
		},
		onLoad() {
			this.Waybill_lists('');

		},
		filters: {

			dateformat: (time) => {

				const date = new Date(time * 1000)

				const year = date.getFullYear()

				const month = date.getMonth() + 1

				const day = date.getDate()

				const hour = date.getHours()

				const minute = date.getMinutes()

				const second = date.getMinutes()

				// return year + "-" + month + "-" + day + " " + hour +":"+ minute +":" + second
				return year + "-" + month + "-" + day;

			},
		},
		methods: {
			// 申请保证金
			bond_apply(id) {

				uni.navigateTo({
					url: "/pages/my/a_xuanzezhanghu?id=" + id
				});
			},
			//运单列表
			Waybill_lists(x) {
				console.log(x)

				if (x != '') {
					x = x.detail.value;
				}
				let data = {
					type: "2",
					waybill_sn: x
				}
				this.$rqt.Waybill_lists(data).then(res => {
					console.log(res);
					this.Waybill_lists_data = res;
					if (1 == res.code) {
						this.Waybill_lists_data = res.data.data || [];
					}
				})
			},
			goBondList() {
				uni.navigateTo({
					url: "/pages/bond/bond_lists"
				});
			},
		},
		computed: {
			lineroute() {
				let lines_route = '';
				let temp_data = this.Waybill_lists_data;
				if (temp_data.length ==0) {
					return lines_route;
				}
				
				let {json_line} = temp_data[0];
				let json_line_arr = JSON.parse(json_line)
				
				lines_route = json_line_arr.map(item => `${item.outlet_name}`).join("-");
				console.log('lines_route', lines_route);
				return lines_route;
				 
			}
		},
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>
<style scoped>
	.wu {
		width: 100%;
		text-align: center;
		padding-top: 60px;
		color: #999999;
		font-size: 18px;
		line-height: 40px;
	}

	.kks {
		width: 100%;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		overflow: hidden;
		background: #FFFFFF;
		margin-bottom: 10px;
	}

	.jjs {
		width: 95%;
		margin: 0 auto;
	}

	.jjs>view {}

	.jjs>view>view {
		line-height: 50px;

	}

	.jjs>view>view>view>view {
		float: left;
		width: 50%;
	}

	.jjs>view>view>button {
		color: #fff;
		margin-bottom: 10px;
		background: #1890FF;
	}

	.jjs>view>view>image {
		width: 28px;
		height: 21px;
		margin-right: 10px;
	}

	.box {
		width: 100%;
		padding-bottom: 20px;
	}

	.shou {
		width: 100%;
		height: 60px;
		background: #1890FF;
		display: flex;
		align-items: center;
	}

	.shou-box {
		width: 260px;
		margin: 0 auto;
		height: 32px;
		background: #FAFAFA;
		border-radius: 40px;
		display: flex;
		align-items: center;
	}

	.shou-box>image {
		width: 15px;
		height: 15px;
		margin-left: 10px;
		margin-right: 10px;
	}
</style>
